<template>
	<div>
		<customHeader title="货代-名片编辑" />
		<div class="card-content">


			<div class="section" v-if="true">
				<div class="form-title">{{$t("基础信息")}}</div>
				<formItem keyName="buy_videos" :errors="errors" class="form-group border-0">
					<div class="form-label red">名片视频</div>
					<fileUploadVue :files.sync="formData.buy_videos" :max-count="1" file-type="video" />
				</formItem>
				<formItem keyName="shop_image" :errors="errors" class="form-group border-0">
					<div class="form-label red">名片展示图</div>
					<fileUploadVue :files.sync="formData.shop_image" :max-count="5" file-type="image" />
				</formItem>

				<formItem keyName="username" :errors="errors" class="form-group">
					<div class="form-label red">{{$t("公司名称")}}:</div>
					<input type="text" v-model="formData.username" class="input" />
				</formItem>
				<formItem keyName="reg_time" :errors="errors" class="form-group">
					<div class="form-label red">{{$t("注册时间")}}:</div>
					<picker mode="date" @change="e=>{formData.reg_time=e.detail.value}">
						<div class="input" style="display: flex;align-items: center;"> {{formData.reg_time}}</div>
					</picker>
				</formItem>
				<formItem keyName="reg_address" :errors="errors" class="form-group">
					<div class="form-label red">{{$t("公司详细地址")}}:</div>
					<input type="text" class="input" v-model="formData.reg_address" />
				</formItem>
				<formItem keyName="profile" :errors="errors" class="form-group no-border">
					<div class="form-label red">{{$t("公司简介")}}:</div>
					<textarea class="textarea" v-model="formData.profile"></textarea>
				</formItem>
			</div>

			<div class="section" v-if="true">
				<div class="form-title">业务信息</div>

				<formItem keyName="main_product" :errors="errors" class="form-group">
					<div class="form-label red">{{$t("主营业务")}}:</div>
					<textarea class="textarea" v-model="formData.main_product"></textarea>
				</formItem>


				<formItem keyName="industry_direction_start" :errors="errors" class="form-group">
					<div class="form-label red">{{$t("业务方向")}}:</div>
					<div class="input between">
						<div style="width:45%;padding:8rpx">
							<formCity style="width: 100%;" :texthidden="true" :is_register="1" :item="cityItemState"
								:is_port="true" @change="(key,res)=>{formData.industry_direction_start=res[2].value}"
								:label="(formData.industry_direction_start_list&&formData.industry_direction_start_list[0]&&formData.industry_direction_start_list[0].mergename)?formData.industry_direction_start_list[0].mergename:'请选择'" />
						</div>
						<image src="/static/card/route.png" mode="widthFix" style="width: 15px;" class="lock"></image>
						<div style="width:45%;padding:8rpx;text-align: right;">
							<formCity style="width: 100%;" :texthidden="true" :is_register="1" :item="cityItemState"
								:is_port="true" @change="(key,res)=>{formData.industry_direction_end=res[2].value}"
								:label="(formData.industry_direction_end_list&&formData.industry_direction_end_list[0]&&formData.industry_direction_end_list[0].mergename)?formData.industry_direction_end_list[0].mergename:'请选择'" />
						</div>
					</div>

				</formItem>

				<formItem keyName="area_id" :errors="errors" class="form-group">
					<div class="form-label red">{{$t("公司所在地")}}:</div>
					<div class="input between">
						<formCity style="width: 100%;" :texthidden="true" :is_register="1" :item="cityItemState"
							:is_port="true" @change="(key,res)=>{formData.area_id=res}"
							:label="(formData.area_id)?formData.area_id.mergename:'请选择'" />
					</div>
				</formItem>




				<formItem keyName="kouan" :errors="errors" class="form-group">
					<div class="form-label red ">
						<div class="between" style="width: 100%;">
							<div>
								{{$t("通关口岸")}}({{$t("可添加多个")}}):
							</div>

							<div class="add-pic-item" @click="formData.kouan.push({id:''})">+ 添加口岸</div>
						</div>
					</div>
					<div class="input" v-for="(item,index) in formData.kouan"
						style="display:flex;align-items: center;margin-bottom: 16rpx;">
						<formCity style="width: 100%;" :texthidden="true" :is_register="1" :item="cityItemState"
							:is_port="true" @change="(key,res)=>{item.id=res[2].value}"
							:label="item.mergename||'请选择'" />
						<div class="del" @click="formData.kouan.splice(index,1)">
							<image src="/static/index2/del2.png" mode="widthFix"></image>
						</div>
					</div>


				</formItem>

				<formItem keyName="provide_services_id" :errors="errors" class="form-group">
					<div class="form-label red">{{$t("提供服务")}}:</div>
					<serviceSelect @change="({ids,label})=>{formData.provide_services_id=ids}"
						:itemValue.sync="formData.provide_services_id" />
				</formItem>



				<formItem keyName="provide_transport_id" :errors="errors" class="form-group">
					<div class="form-label red">{{$t("运输方式")}}:</div>
					<transportationSelect @change="({ids,label})=>{formData.provide_transport_id=ids}"
						:itemValue.sync="formData.provide_transport_id" />
				</formItem>

				<formItem keyName="transport_type" :errors="errors" class="form-group">
					<div class="form-label red">{{$t("业务选项")}}:</div>
					<customRadio @change="({ids,label})=>{formData.transport_type=ids}"
						:itemValue.sync="formData.transport_type" />
				</formItem>

			</div>

			<div class="section">
				<div class="form-title between ">
					<div>
						{{$t("仓库配套")}}:
					</div>
					<div style="text-align: right;font-weight: normal;font-size: 22rpx;color:#999;">选择展示仓库 (多选)</div>
				</div>

				<div class="center" style="margin-bottom: 24rpx;padding-top:30rpx;">
					<div v-if="!formData.warehouse_ids" class="add-pic-item center" style="min-width: 150rpx;"
						@click="warehouseSelectIsShow=true">点击选择
					</div>
					<div v-else class="add-pic-item center" style="min-width: 150rpx;"
						@click="warehouseSelectIsShow=true">
						重新选择(已选{{formData.warehouse_ids.split(",").length}}个)</div>
				</div>

				<u-popup v-model="warehouseSelectIsShow" mode="bottom" height="85%">
					<warehouseSelect :itemValue="formData.warehouse_ids" :u_id="current_user_id"
						@change="(res)=>{formData.warehouse_ids=res}"
						:warehouseSelectIsShow.sync="warehouseSelectIsShow" />
				</u-popup>
			</div>


			<div class="section">
				<div class="form-title between">
					资质证照
					<div class="add-pic-item" @click="$refs.fileUploadWithTitle.add()">+ 新增素材</div>
				</div>

				<fileUploadWithTitle ref="fileUploadWithTitle" @change="(res)=>{formData.license_images=res}"
					:itemValue.sync="formData.license_images" />
			</div>

			<div class="section">
				<div class="form-title">
					现场实拍
				</div>
				<div class="form-group">
					<div class="form-label">公司</div>
					<fileUploadVue :files.sync="formData.company_images" :max-count="3" file-type="image" />
				</div>
				<div class="form-group">
					<div class="form-label">车辆</div>
					<fileUploadVue :files.sync="formData.car_images" :max-count="3" file-type="image" />
				</div>
				<div class="form-group">
					<div class="form-label">运输</div>
					<fileUploadVue :files.sync="formData.transport_images" :max-count="3" file-type="image" />
				</div>
				<div class="form-group border-0">
					<div class="form-label">服务</div>
					<fileUploadVue :files.sync="formData.service_images" :max-count="3" file-type="image" />
				</div>
			</div>

		</div>

		<div style="height: 200rpx;"></div>

		<div class="form-btn-group">
			<div class="submit" @click="saveUserInfo">
				保存并预览
			</div>
		</div>

	</div>
</template>

<script>
	import customHeader from "../components/header.vue"
	import transportationSelect from "../components/transportation-select.vue"
	import serviceSelect from "../components/service-select.vue"
	import customRadio from "../components/radio.vue"
	import route from "../components/route.vue"
	import fileUploadVue from '../../components/fileUpload.vue'
	import fileUploadWithTitle from '../components/fileUploadWithTitle.vue'
	import formItem from "../components/form-item.vue"
	import validate from "../utils/validate.js"
	import schema from "./crossborderSchema.js"

	import formCity from '../../components/formCitys.vue'
	import warehouseSelect from '../components/warehouse-select.vue'

	export default {
		props:["parent_current_user_id"],
		components: {
			customHeader,
			transportationSelect,
			serviceSelect,
			customRadio,
			route,
			fileUploadVue,
			fileUploadWithTitle,
			formItem,
			formCity,
			warehouseSelect
		},
		data() {
			return {
				warehouseSelectIsShow: false,
				vehicleSelectIsShow: false,
				errors: [],
				current_user_id: uni.getStorageSync("user_id"),
				formData: {},
				cityItemState: {
					key: "city_id",
					label: false,
					placeholder: this.$t('所在城市'),
					type: "city",
					required: true,
					value: [],
					rules: {},
				},
			}
		},
		onLoad(options) {
			//名片还可以查看其他人的
			if (options.parent_current_user_id) this.current_user_id = options.parent_current_user_id
		},
		created() {
			//名片还可以查看其他人的
			if (this.parent_current_user_id) this.current_user_id = this.parent_current_user_id
			
			this.getUserInfo()

		},
		methods: {
			
			log(res) {
				console.log(res)
			},
			//获取名片
			getUserInfo() {

				this.$u.api.user.getUserHomepage({
					user_id: this.current_user_id,
					type: 1,
					from: ''
				}).then(res => {
					//格式化参数
					if (res.userInfo.buy_videos) res.userInfo.buy_videos = res.userInfo.buy_videos.split(",")

					if (res.userInfo.company_images) res.userInfo.company_images = res.userInfo.company_images
						.split(",")
					if (res.userInfo.car_images) res.userInfo.car_images = res.userInfo.car_images.split(",")
					if (res.userInfo.transport_images) res.userInfo.transport_images = res.userInfo
						.transport_images.split(",")
					if (res.userInfo.service_images) res.userInfo.service_images = res.userInfo.service_images
						.split(",")

					if (!res.userInfo.kouan) res.userInfo.kouan = []

					this.formData = res.userInfo
				})

			},
			//提交修改名片
			async saveUserInfo() {


				const formDataTemp = JSON.parse(JSON.stringify(this.formData))

				//提取需要提交的参数
				let formData = {};
				[
					//通用
					"buy_videos", "shop_image", "username", "reg_time", "reg_address", "profile", "main_product",
					"provide_transport_id", "transport_type", "car_quote", "license_images", "company_images",
					"car_images", "transport_images", "service_images",
					//货代
					"industry_direction_start",
					"industry_direction_end",
					"provide_services_id",
					"kouan",
					"kouan_id",
					"area_id",
					"warehouse_ids"
				].forEach(key => {
					formData[key] = formDataTemp[key]
				})

				console.log(formData);

				if (!await validate({
						vm: this,
						schema,
						params: formData
					})) return


				formData.buy_videos = formData.buy_videos.map(item => {
					return {
						url: item
					}
				})
				formData.shop_image = formData.shop_image.map(item => {
					return {
						url: item
					}
				})

				//口岸处理
				formData.kouan_id = this.formData.kouan.map(item => item.id).join(",")

				//提交前对参数预处理
				if (formData.company_images) formData.company_images = formData.company_images.join(",")
				if (formData.car_images) formData.car_images = formData.car_images.join(",")
				if (formData.transport_images) formData.transport_images = formData.transport_images.join(",")
				if (formData.service_images) formData.service_images = formData.service_images.join(",")

				//资质证照
				if (!(formData.license_images && formData.license_images.split(";")[0])) formData.license_images = ""

				uni.showLoading({
					title: this.$t("正在提交")
				})
				delete formData.idnum
				this.$u.api.user.profile(formData).then(res => {
					uni.hideLoading()
					uni.showModal({
						title: "操作完成"
					})
					uni.setStorageSync("reload", "crossborderDetail")
				})
			},
			go(url) {
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="less"> 
	@import url("../components/form.less");
</style>